<template>
  <div class="app-container">
    <section>
      <div class="contentBox">
        <div class="title">
          <span>发票详情</span>
        </div>
        <div class="content">
          <el-form ref="form" :model="form" class="form" label-width="110px">
            <el-form-item label="开票方:" style="width: 100%">
              <span v-if="form.company">{{ form.company.name }}</span>
            </el-form-item>
            <el-form-item label="抬头类型:" style="width: 100%">
              <span>{{ form.rise_type == 1 ? "公司" : "个人" }}</span>
            </el-form-item>
            <el-form-item label="抬头名称:" style="width: 100%">
              <span>{{ form.rise_name }}</span>
            </el-form-item>
            <el-form-item
              label="纳税人识别号:"
              style="width: 100%"
              v-if="form.rise_type == 1"
            >
              <span v-if="form.rise_type == 1">{{ form.identification }}</span>
            </el-form-item>
            <el-form-item label="发票类型:" style="width: 100%">
              <span>{{ form.type == 1 ? "专票" : "普票" }}</span>
            </el-form-item>
            <el-form-item
              label="公司地址:"
              style="width: 100%"
              v-if="form.type == 1"
            >
              <span>{{ form.address }}</span>
            </el-form-item>
            <el-form-item
              label="公司电话:"
              style="width: 100%"
              v-if="form.type == 1"
            >
              <span>{{ form.phone }}</span>
            </el-form-item>
            <el-form-item
              label="公司开户行:"
              style="width: 100%"
              v-if="form.type == 1"
            >
              <span>{{ form.bank }}</span>
            </el-form-item>
            <el-form-item
              label="开户行账号:"
              style="width: 100%"
              v-if="form.type == 1"
            >
              <span>{{ form.account }}</span>
            </el-form-item>
            <el-form-item label="发票金额:" style="width: 100%">
              <span>{{ form.money }}</span>
            </el-form-item>
            <!-- <el-form-item label="实开票金额:" style="width: 100%">
              <span></span>
            </el-form-item>
            <el-form-item label="发票内容:" style="width: 100%">
              <span></span>
            </el-form-item> -->
            <el-form-item label="申请时间:" style="width: 100%">
              <span>{{ form.create_time }}</span>
            </el-form-item>
            <el-form-item label="开票时间:" style="width: 100%">
              <span>{{ form.invoice_date }}</span>
            </el-form-item>
            <el-form-item label="发票号码:" style="width: 100%">
              <span v-if="form.invoice_code">{{ form.invoice_code }}</span>
            </el-form-item>
            <el-form-item label="发票代码:" style="width: 100%">
              <span v-if="form.invoice_num">{{ form.invoice_num }}</span>
            </el-form-item>
            <el-form-item label="发送状态:" style="width: 100%">
              <span>{{ form.status | status }}</span>
            </el-form-item>
            <el-form-item label="发送方式:" style="width: 100%">
              <span>{{ form.send_type | send_type }}</span>
            </el-form-item>
          </el-form>
          <div style="margin-top: 40px">
            <el-button style="width: 110px" @click="$router.go(-1)"
              >返回</el-button
            >
            <!-- <el-button
              v-if="type == 1"
              type="primary"
              style="width: 110px"
              @click="save"
              >确定</el-button
            > -->
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: "",
      form: {
        id: "",
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.getDetails();
    }
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
  },
  filters: {
    send_type(val) {
      switch (val) {
        case 1:
          val = "邮箱";
          break;
        case 2:
          val = "短信";
          break;
        case 3:
          val = "邮寄";
          break;
      }
      return val;
    },
    status(val) {
      switch (val) {
        case 1:
          val = "待开票";
          break;
        case 2:
          val = "已开票";
          break;
        case 3:
          val = "发票已作废";
          break;
        case 20:
          val = "开票中";
          break;
        case 21:
          val = "开票成功签章中";
          break;
        case 22:
          val = "开票失败";
          break;
        case 24:
          val = "开票成功签章失败";
          break;
        case 31:
          val = "发票作废中";
          break;
      }
      return val;
    },
  },
  mounted() {},
  methods: {
    // 获取详情
    async getDetails() {
      let { code, data } = await this.$Http.getInvoice(this.form);
      if (code) {
        this.form = data;
      }
    },
    //确认开票
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let { code, data } = await this.$Http.applyInvoice({
            id: this.form.id,
          });
          if (code) {
            this.$message.success("开票成功");
            this.$router.go(-1);
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  section {
    .contentBox {
      background: #fff;
      border-radius: 8px;
      padding: 0px 24px 20px;
      min-width: 700px;
      min-height: calc(100vh - 165px);
      .title {
        line-height: 70px;
        font-size: 18px;
        font-weight: 600;
        color: #383b40;
        .el-icon-close {
          cursor: pointer;
        }
      }
    }
    .content {
      max-width: 700px;
      height: 100%;
      .form {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
    }
  }
}
.el-form-item {
  margin-bottom: 0;
}
.wrap {
  display: flex;
  p {
    margin-right: 20px;
    line-height: 35px;
    border-radius: 4px;
    background: #f1f1f1;
    font-size: 16px;
    padding: 0 20px;
  }
}
p {
  margin: 0;
}
.addTxt {
  color: #1890ff;
}
</style>